<script setup>
import axios from 'axios';
import { ref } from 'vue'
import { useUrlStore } from '@/stores/url';
const UrlStore = useUrlStore()

const dialogVisible = ref(false)

const table1 = ref(false)
const table2 = ref(false)

const IndexFileName = ref('')
const IndexFileSize = ref('')
const ResumeFileName = ref('')
const ResumeFileSize = ref('')

const saveIndexUrl = ref('')
const saveResumeUrl = ref('')
const unsaveIndexUrl = ref('')
const unsaveResumeUrl = ref('')

//获取已保存的页面配置
axios({
  url: 'http://175.178.62.164:61803/config/real'
}).then(result => {
  IndexFileName.value = result.data.data.homePhoto
  IndexFileSize.value = result.data.data.homePhotoSize
  ResumeFileName.value = result.data.data.deliverPhoto
  ResumeFileSize.value = result.data.data.deliverPhotoSize
}).catch(err => {
  console.dir(err);
});


//预览已保存的页面配置
const previewSave = () => {
  table1.value = true //显示右侧弹出栏（要用value）
  axios({
    url: 'http://175.178.62.164:61803/config/real'
  }).then(result => {
    saveIndexUrl.value = UrlStore.url + '/' + result.data.data.homePhoto
    saveResumeUrl.value = UrlStore.url + '/' + result.data.data.deliverPhoto
  }).catch(err => {
    console.dir(err);
  });
}

//预览未保存的页面配置
const previewUnsave = () => {
    table2.value = true //显示右侧弹出栏（要用value）
    axios({
      url: 'http://175.178.62.164:61803/config/virtual'
    }).then(result => {
      unsaveIndexUrl.value = UrlStore.url + '/' + result.data.data.homePhoto
      unsaveResumeUrl.value = UrlStore.url + '/' + result.data.data.deliverPhoto
    }).catch(err => {
      console.dir(err);
    });
}

//上传首页图片配置（但不保存）
const IndexFileChange =  async(event) => {
  const files = event.target.files; // 获取选择的所有文件
  console.log(files);
  IndexFileName.value = files[0].name


  // 在这里可以将文件上传至服务器或执行其他操作
  const formdata = new FormData()
  formdata.append('homePhoto', files[0]);

  await axios({
    url: 'http://175.178.62.164:61803/config/home',
    method: 'post',
    data: formdata
  }).then(result => {
    console.log(result);
  }).catch(err => {
    console.log(err);
  })

      //获取文件大小
      axios({
    url: 'http://175.178.62.164:61803/config/virtual'
  }).then(result => {
    IndexFileSize.value = result.data.data.homePhotoSize
  }).catch(err => {
    console.dir(err);
  });
}

//上传简历页图片配置（但不保存）
const ResumeFileChange = async(event) => {
  const files = event.target.files; // 获取选择的所有文件
  console.log(files);
  ResumeFileName.value = files[0].name
  // 在这里可以将文件上传至服务器或执行其他操作
  const formdata = new FormData()
  formdata.append('deliverPhoto', files[0]);
 await axios({
    url: 'http://175.178.62.164:61803/config/deliver',
    method: 'post',
    data: formdata
  }).then(result => {
    console.log(result);
  }).catch(err => {
    console.log(err);
  })

    //获取文件大小
    axios({
    url: 'http://175.178.62.164:61803/config/virtual'
  }).then(result => {
    ResumeFileSize.value = result.data.data.deliverPhotoSize
  }).catch(err => {
    console.dir(err);
  });
}

//保存图片配置
const changePhoto = () => {
  dialogVisible.value = false //关闭弹框（要用value）
  axios({
    url: 'http://175.178.62.164:61803/config/save',
  }).then(result => {
    console.log(result);
  }).catch(err => {
    console.log(err);
  })
}
</script>

<template>
  <div class="containerBox">

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="温馨提示" width="30%" >
      <span>此操作将会使未保存的配置覆盖已保存的配置，确定修改吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="changePhoto">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <h3>首页配图</h3>
    <span class="photoName">当前配图文件名：{{ IndexFileName }}（{{ IndexFileSize }}KB）</span>
    <input type="file" id="upload1" class="inputfile" @change="IndexFileChange">
    <label for="upload1">
      <span class="button">编辑</span>
    </label>

    <h3>简历投递页面配图</h3>
    <span class="photoName">当前配图文件名：{{ ResumeFileName }}（{{ ResumeFileSize }}KB）</span>
    <input type="file" id="upload2" class="inputfile" @change="ResumeFileChange">
    <label for="upload2">
      <span class="button">编辑</span>
    </label>

    <el-button class="leftButton" @click="previewSave">预览已保存的配置</el-button>
    <el-button class="centerButton" @click="previewUnsave">预览未保存的配置</el-button>
    <el-button type="primary" class="rightButton" @click="dialogVisible = true">确定修改</el-button>

    <!-- 右侧弹出栏 -->
    <el-drawer v-model="table1" title="用户页面效果预览" direction="rtl" size=900>
      <div class="drawerContainer">
        <div class="indexBox box">
          <img class="yulan" :src=saveIndexUrl alt="">
          <img class="yulan" src="../assets/index.png" alt="">
        </div>
        <div class="resumeBox box">
          <img class="yulan" :src=saveResumeUrl alt="">
          <img class="yulan" src="../assets/resume.png" alt="">
        </div>
      </div>
    </el-drawer>

    <el-drawer v-model="table2" title="用户页面效果预览" direction="rtl" size=900>
      <div class="drawerContainer">
        <div class="indexBox box">
          <img class="yulan" :src=unsaveIndexUrl alt="">
          <img class="yulan" src="../assets/index.png" alt="">
        </div>
        <div class="resumeBox box">
          <img class="yulan" :src=unsaveResumeUrl alt="">
          <img class="yulan" src="../assets/resume.png" alt="">
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.yulan {
  width: 100%;
}

.drawerContainer .box {
  width: 375px;
  display: flex;
  flex-direction: column;
}

.drawerContainer {
  display: flex;
  justify-content: space-around;
}

.inputfile {
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  position: absolute;
  top: 0;
  left: 0;
}

.filename {
  margin-left: 10px;
}

.containerBox {
  overflow: hidden;
  /* 解决外边距折叠现象-塌陷现象 */
  background-color: #fff;
  margin: 0 1vw;
  height: 90vh;
}

h3 {
  margin: 3vh;
}

.photoName {
  margin: 1.5vh 4vh 3.5vh 10vh;
  display: inline-block;
}

.button {
  color: rgb(84, 155, 255);
  cursor: pointer;
}

.button:hover {
  color: rgb(0, 96, 231);
  cursor: pointer;
}

.leftButton {
  box-sizing: border-box;
  position: absolute;
  width: 10vw;
  right: 27vw;
  bottom: 2vw;
  margin: 0 2vw;
}

.centerButton {
  box-sizing: border-box;
  position: absolute;
  width: 10vw;
  right: 13vw;
  bottom: 2vw;
  margin: 0 2vw;
}

.rightButton {
  box-sizing: border-box;
  position: absolute;
  width: 7vw;
  right: 2vw;
  bottom: 2vw;
  margin: 0 2vw;
}

.el-button {
  box-sizing: border-box;
  padding: 0 2vw;
  margin: 1vw 4vw;
}
</style>